<template>
  <div id="ipadpro" >
    <!-- --------------------------------一楼结构------------------------- -->
    <div class="f1">
      <div class="center">
        <div class="box">
          <p>iPad Pro</p>
          <p>RMB 354/月 (24 期)或RMB 8,499起</p>
        </div>
      </div>
    </div>
    <!-- --------------------------------二楼结构------------------------- -->
    <div class="f2">
      <div class="center">
        <div class="box">
          <p>
            为高校生活购买 Mac 或 iPad，以教育优惠节省更多◊，另有 AirPods
            搭配其中◊◊◊。 立即选购
          </p>
        </div>
      </div>
    </div>
    <!-- --------------------------------三楼结构------------------------- -->
    <div class="f3" v-if="data">
      <div class="center">
        <div class="box">
          <!-- 左边图片部分-->
          <div class="box1">
            <div class="box1-1">
              <img src="" />
            </div>
            <div class="box1-2">
              <div>
                <svg viewBox="0 0 35 35" width="35px" height="35px">
                  <path fill="none"></path>
                  <path
                    d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748v9.471a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-4.538 2.446l9.651 5.566-4.4 2.5-9.823-5.58c.038-.026.07-.059.111-.081zM7.788 23.539A1.5 1.5 0 017 22.219v-9.471a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                  ></path>
                </svg>
                <p>免费送货</p>
              </div>
              <div>
                <svg viewBox="0 0 35 35" width="35px" height="35px">
                  <rect width="35" height="35" fill="none"></rect>
                  <path
                    d="M17.5,6.1A11.4,11.4,0,1,1,6.1,17.5,11.41294,11.41294,0,0,1,17.5,6.1m0-1.1A12.5,12.5,0,1,0,30,17.5,12.5,12.5,0,0,0,17.5,5Z"
                  ></path>
                  <path
                    d="M9.0498,19.6626a.51614.51614,0,0,1,.65821-.541A25.70105,25.70105,0,0,0,17.4873,20.3208a25.68829,25.68829,0,0,0,7.77735-1.19922.52156.52156,0,0,1,.66015.541,8.34671,8.34671,0,0,1-8.4375,7.35547A8.35447,8.35447,0,0,1,9.0498,19.6626Zm15.2129,2.584a7.008,7.008,0,0,0,.73828-2.14941,26.8936,26.8936,0,0,1-7.51368,1.06738,26.91758,26.91758,0,0,1-7.51562-1.06738A7.086,7.086,0,0,0,10.71,22.24658a22.4677,22.4677,0,0,0,6.77734,1.041A22.45514,22.45514,0,0,0,24.2627,22.24658ZM12.332,14.74463a1.64578,1.64578,0,0,1,1.48926-1.75391,1.64676,1.64676,0,0,1,1.50391,1.75391,1.659,1.659,0,0,1-1.50391,1.7666A1.65823,1.65823,0,0,1,12.332,14.74463Zm7.31738,0A1.647,1.647,0,0,1,21.165,12.99072a1.64583,1.64583,0,0,1,1.49023,1.75391,1.65827,1.65827,0,0,1-1.49023,1.7666A1.65918,1.65918,0,0,1,19.64941,14.74463Z"
                  ></path>
                </svg>
                <p>免费个性化镌刻服务</p>
              </div>
              <div>
                <svg viewBox="0 0 35 35" width="35px" height="35px">
                  <path fill="none" d="M0 0h35v35H0z"></path>
                  <path
                    d="M12.249 9.022l-4.461 2.4c-.041.022-.073.055-.111.081l9.823 5.588 4.4-2.5zM27.322 11.507c-.038-.025-.069-.058-.11-.081l-9-4.852a1.5 1.5 0 00-1.424 0l-3.5 1.889 9.628 5.55zM10.8 18.5a.5.5 0 01-.5.5H7v3.219a1.5 1.5 0 00.788 1.32l9 4.852a1.494 1.494 0 00.212.082V17.957l-9.931-5.645a1.494 1.494 0 00-.069.436V18h3.3a.5.5 0 01.5.5zM18 17.957v10.515a1.481 1.481 0 00.212-.082l9-4.851a1.5 1.5 0 00.788-1.32v-9.471a1.5 1.5 0 00-.069-.436z"
                    fill="none"
                  ></path>
                  <path
                    d="M27.687 10.547l-9-4.852a2.5 2.5 0 00-2.373 0l-9 4.852A2.5 2.5 0 006 12.748V17h1v-4.252a1.494 1.494 0 01.069-.436L17 17.957v10.516a1.494 1.494 0 01-.212-.082l-9-4.852A1.5 1.5 0 017 22.219V20H6v2.219a2.494 2.494 0 001.313 2.2l9 4.852a2.5 2.5 0 002.373 0l9-4.852a2.5 2.5 0 001.314-2.2v-9.471a2.5 2.5 0 00-1.313-2.201zm-10.9-3.971a1.5 1.5 0 011.424 0l9 4.852c.041.022.072.055.11.081l-4.41 2.507-9.628-5.55zm-9.11 4.932c.038-.026.07-.059.111-.081l4.461-2.4 9.651 5.561-4.4 2.5zM28 22.219a1.5 1.5 0 01-.788 1.32l-9 4.851a1.481 1.481 0 01-.212.082V17.957l9.931-5.646a1.5 1.5 0 01.069.436z"
                  ></path>
                  <path
                    d="M2.507 18l1.646-1.646a.5.5 0 00-.707-.707l-2.5 2.5a.5.5 0 000 .707l2.5 2.5a.5.5 0 10.707-.707L2.507 19H6v-1zM10.3 19a.5.5 0 000-1H7v1zM6 18h1v1H6z"
                  ></path>
                </svg>
                <p>简单免费的退货服务</p>
              </div>
            </div>
          </div>
          <!-- 右边样式选择部分 -->
          <div class="box2">
            <!-- 大标题部分 -->
            <div class="box2-1">
              <h2>购买 iPad Pro</h2>
              <p>购买 iPad，享受免费送货服务。</p>
            </div>
            <!-- 型号选择部分 -->
            <div class="box2-2">
              <h4>型号</h4>
              <div class="text1 pointer">
                <p>
                  先进的显示屏,两款尺寸各有精彩。11
                  英寸显示屏灵巧便携,令人沉浸。
                </p>
                <p>12.9 英寸 XDR 显示屏宽大绚丽,能尽显 HDR 内容的精彩。</p>
              </div>
              <div class="box2-2-2 pointer" v-for="xinghao in data.xh" :key="xinghao.xid" 
              @click="changeinfo(xinghao)">
                <div class="text">
                  <p>{{xinghao.xinghao}}</p>
                  <p>{{xinghao.xianshi}}</p>
                </div>
                <div class="rmb">
                  <p>RMB 258/月或</p>
                  <p>RMB {{xinghao.price}} 起</p>
                </div>
              </div>
              <div class="title">
                <p>11 英寸 iPad Pro</p>
                <a href="#">修改</a>
              </div>
            </div>
            <!-- 外观部分 -->
            <div class="box2-3">
              <h4>外观</h4>
              <div class="box2-3-1" >
                <div class="pointer" v-for="waiguan in data.wg" :key="waiguan.wid">
                  <img :src="waiguan.img" />
                  <p>{{waiguan.color}}</p>
                </div>
              </div>
              <div class="title">
                <p>深空灰色</p>
                <a href="#">修改</a>
              </div>
            </div>
            <!-- 存储部分 -->
            <div class="box2-4">
              <h4>存储</h4>
              <div class="text1">
                <p class="pointer">
                  提前做准备,为以后的需要留足空间。你的 iPad Pro
                  容量越大,用来存储数字内容的空间就越多,选择时既要满足现在,要考虑将来的需求。
                </p>
              </div>
              <div class="box2-4-2">
                <div class="pointer" v-for="neicun in data.cc" :key="neicun.cid">
                  <div class="text">
                    <span>{{neicun.cunchu}}<sup>1</sup></span> 
                  </div>
                  <p>RMB 354/月或</p>
                  <p>RMB 起</p>
                </div>
                <!-- <div class="pointer">
                  <div class="text">
                    <span>256</span> <span>GB<sup>1</sup></span>
                  </div>
                  <p>RMB 387/月或</p>
                  <p>RMB 9299 起</p>
                </div>
                <div class="pointer">
                  <div class="text">
                    <span>512</span> <span>GB<sup>1</sup></span>
                  </div>
                  <p>RMB 454/月或</p>
                  <p>RMB 10899 起</p>
                </div>
                <div class="pointer">
                  <div class="text">
                    <span>1</span> <span>TB<sup>1</sup></span>
                  </div>
                  <p>RMB 587/月或</p>
                  <p>RMB 14099 起</p>
                </div>
                <div class="pointer">
                  <div class="text">
                    <span>2</span> <span>TB<sup>1</sup></span>
                  </div>
                  <p>RMB 721/月或</p>
                  <p>RMB 17299 起</p>
                </div> -->
              </div>
              <div class="title">
                <p>128 GB<sup>1</sup></p>
                <a href="#">修改</a>
              </div>
            </div>
            <!--连接部分  -->
            <div class="box2-5">
              <h4>连接</h4>
              <div class="text1">
                <p class="pointer">
                  两种高速连接方式,处处连线都方便。每部 iPad
                  都能连接无线局域网。没有可用的无线局域网时,无线局域网 +
                  蜂窝网络机型依然能让你时时保持在线。
                </p>
              </div>
              <div class="box2-5-1">
                <div class="pointer">
                  <h4>无线局域网机型</h4>
                  <p>RMB 258/月 或</p>
                  <p>RMB 6,199</p>
                </div>
                <div class="pointer">
                  <h4>无线局域网 + 蜂窝网络</h4>
                  <h4>机型</h4>
                  <p>RMB 308/月 或</p>
                  <p>RMB 7,399</p>
                </div>
              </div>
              <div class="title">
                <p>无线局域网机型</p>
                <a href="#">修改</a>
              </div>
            </div>
            <!--右边购买添加购物袋页面  -->
            <div class="box2-6">
              <div class="box2-6-1">
                <h2>RMB 258/月 (24 期)</h2>
                <p>或</p>
                <h2>RMB 6,199</h2>
                <p>含增值税及其他法定税费：约 RMB 724。</p>
                <p>可享免息分期付款</p>
              </div>
              <div class="box2-6-2">
                <h4>11 英寸 iPad Pro</h4>
                <div>
                  <img src="../../assets/YYT_IMG/ipad-one.png" />
                  <div>
                    <p>预计发货日期：</p>
                    <p>3-5 个工作日</p>
                    <p>免费送货</p>
                    <a href="#">查看送货日期</a>
                  </div>
                </div>
                <div>
                  <img src="../../assets/YYT_IMG/ipad-two.png" />
                  <div>
                    <p>取货：</p>
                    <a href="#">查看供货情况</a>
                  </div>
                </div>
              </div>
              <button>添加购物袋</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!------------------- 四楼结构------------------------- -->
    <div class="f4">
      <div class="center">
        <div class="box">
          <h2>包装内容</h2>
          <div class="box1">
            <div>
              <div class="box1-1">
                <img src="" />
              </div>
              <p>11 英寸 iPad Pro</p>
            </div>
            <div>
              <div>
                <img src="" />
              </div>
              <p>USB-C 充电线</p>
            </div>
            <div>
              <div>
                <img src="" />
              </div>
              <p>20W USB-C 电源适配器</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- ------------------------5楼结构 ------------------------------------->
    <div class="f5 gongxiang">
      <div class="center">
        <div class="f5-1">
          <div class="box1">
            <p>iPad 机型比较</p>
          </div>
          <ipad-zu />
          <div class="box3">
            <a href="#">比较各款 iPad 机型 > </a>
            <a href="#">选购 iPad > </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import IpadZu from "@/components/IpadZu.vue";
import Products from '@/plugins/Product';
export default {
  components: { IpadZu },
    data() {
    return {
      data: null,
      product:{},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let url = "http://localhost:3000/product/1";
      axios.get(url)
      .then(res => {return res;})
      .then(res =>{this.data = res.data;return res})
      //开始创建一个product 产品对象
      .then(res=>{
        console.log(res.data);
        res.data.xh[0].title = "11 英寸显示屏",
        res.data.xh[1].title = "12.9 英寸显示屏",

        res.data.wg[0].title = "深空灰色",
        res.data.wg[1].title = "银色",
        
        //网络请求结束后 设定默认的机型
        this.product = new Products.Ipad(1,"ipadpro")
        let mac = new Products.Mac(5,"mac m1");
        mac.setArm({title:'8GB 统一内存',price:3000})
        mac.setMemory({title:'256GB 固态硬盘'})
        mac.setKeybord({title:'中文',price:0})
        console.log(mac)
        
        // console.log(this.product)
        //支持链式语法
        //默认的机型参数配置
        this.product.setInfo(res.data.xh[0])
        .setMemory({title:'256g',price:0})
        .setAppear(res.data.wg[0])
        .setConnect({title:"无线局域网机型",price:0})
        console.log(this.product.getAllTitle());
        console.log(this.product.getPrice());
        
      });
    },
    changeinfo(o){
        
        //点击按钮，感受数据的变化
        console.log(this.product.getPrice(),this.product.getAllTitle());
        this.product.setInfo(o)
        console.log(this.product.getPrice(),this.product.getAllTitle());
        // console.log(this.product.getPrice());
        // console.log(this.product.getAllTitle());
    }
  },
};
</script>

<style lang="less" scoped>
#ipadpro {
  width: 100%;
  height: 100%;
}
</style>
<style scoped src="../../assets/css/ipadpro.css"></style>

